import React, { useState, useEffect } from 'react'
import './Crumbs.scss'
//引入store 
import { useSelector, useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import { UseDispatch, UseSelector } from 'react-redux'
import { delmenu } from '../../store/modules/module'
export default function Crumbs() {
  //获取到store中的数据
  const [menuList, setMenuList] = useState([])
  const navigate = useNavigate()
  const dispatch = useDispatch()
  //面包屑
  const menuListData = useSelector((state: any) => state.menuVal)
  //如果menuListData为空，则不渲染
  if (menuListData.length === 0) {
    return null
  }

  return (
    <div>
      <div className="crumbs">
        {/* 面包屑左侧图标 */}
        <img src="/icon/menu-fold.png" alt="" style={{ width: '20px', height: '20px' }} />
        <div className="cbsbox">
          <div>
            <span onClick={() => {
              navigate(menuListData[1])
            }}>{menuListData[0]}</span>

            <span className='span' onClick={() => {
              dispatch(delmenu(menuListData[0]))
            }}>x</span>
          </div>
        </div>
      </div>
    </div>
  )
}
